<template>
	<div>
		<div class="head">
			<span>姓名: {{infoData.real_name}}</span>
			<span>性别: {{infoData.gender}}</span>
			<span>年龄: {{infoData.age}}</span>
			<span>联系方式: {{infoData.tel}}</span>
		</div>
		<v-table :tableColumns="tableColumns" :tableData="tableData1" :totalPage="totalPage" :isPage="isPage" @getPage="selectPage"></v-table>
		
		
		<Modal v-model="isImgShow" :width="400" class-name="eidthform" :footer-hide="true">
			<p slot="header">图片查看</p>
			<div class="demo-upload-list">
		    	<div class="imgbox" v-show="isHaveImg">
					<img :src="formData.imageurl">
				</div>
		        <div class="demo-upload-list-cover">
		            <Icon type="ios-eye-outline" @click.native="handleView"></Icon>
		            <!--<Icon type="ios-trash-outline" @click.native="handleRemove"></Icon>-->
		        </div>
		    </div>
		    
		    <Modal title="查看图片" v-model="visible" :mask-closable="false">
		    	<div>
		    		<img :src="formData.imageurl" v-if="visible" style="width: 100%">
		    	</div>
		        
		        <div slot="footer" class="button-box">
		            <Button type="ghost" @click="cancel('visible')">取消</Button>
		        </div>
		    </Modal>
		</Modal>
		<Modal v-model="isShow" :width="400" class-name="eidthform">
			<p slot="header">病历编辑</p>
			<Form ref='caseForm' :model='formData' :label-width="70">
				<FormItem label="就诊门类:">
					<Select v-model="formData.departmentcategory">
				        <Option value="门诊">门诊</Option>
						<Option value="住院">住院</Option>
						<Option value="急诊">急诊</Option>
				    </Select>
			    </FormItem>
			    <FormItem label="姓名:">
					<Input v-model="formData.name" placeholder="请输入姓名"></Input>
				</FormItem>
				<FormItem label="就诊医院:">
					<Input v-model="formData.hospitalname" placeholder="请输入就诊医院"></Input>
				</FormItem>
				<FormItem label="就诊结果:">
					<Input v-model="formData.treatmentresult" placeholder="请输入就诊结果"></Input>
				</FormItem>
				<FormItem label="就诊日期:">
                	<DatePicker type="date" :value="formData.treatmentTime" @on-change="setTime" format="yyyy-MM-dd" placeholder="请选择就诊日期" style="width: 100%"></DatePicker>						
				</FormItem>
				<FormItem label="就诊科室:">
					<Cascader placement="top" :data="caseData" v-model="keshi"  @on-change='caseAction'></Cascader>
				</FormItem>
				<!--<FormItem label="图片:">
					<Upload
				        ref="upload"
				        :show-upload-list="false"
				        :on-success="handleSuccess"
				        :format="['jpg','jpeg','png']"
				        :max-size="2048"
				        :on-format-error="uploadFormatError"
				        :on-exceeded-size="uploadMaxSize"
				        :before-upload="handleBeforeUpload"
				        :on-error="uploadError"
				        multiple
				        :data="imgData"
				        type="drag"
				        action="//jsonplaceholder.typicode.com/posts/"
				        style="display: inline-block;width:58px;">
				        <div style="width: 58px;height:58px;line-height: 58px;">
				            <Icon type="ios-camera" size="20"></Icon>
				        </div>
				    </Upload>
				    <div class="demo-upload-list" v-show="isDelete">
				    	<div class="imgbox">
							<img :src="formData.imageurl">
						</div>
				        <div class="demo-upload-list-cover">
				            <Icon type="ios-eye-outline" @click.native="handleView"></Icon>
				            <Icon type="ios-trash-outline" @click.native="handleRemove"></Icon>
				        </div>
				    </div>
				    
				    <Modal title="查看图片" v-model="visible" :mask-closable="false">
				    	<div>
				    		<img :src="formData.imageurl" v-if="visible" style="width: 100%">
				    	</div>
				        
				        <div slot="footer" class="button-box">
				            <Button type="ghost" @click="cancel('visible')">取消</Button>
				        </div>
				    </Modal>
				</FormItem>-->
			</Form>  
			<div slot="footer" class="button-box">
	            <Button type="primary" :loading="caseKeep"  @click="keepCase('caseForm')">保存</Button>
	            <Button type="ghost" @click="caseCancel('caseForm', 'isShow')">取消</Button>
	        </div>
		</Modal>
	</div>
</template>

<script>
	import vTable from '@/components/common/Table.vue';
	import uploadPic from "@/components/common/UploadPic.vue";
	export default {
		components: {
			vTable,
			uploadPic
		},
		data(){
			return {
				customer_id: '',
				isHaveImg: true,
				keshi: [],
				caseKeep: false,
				isImgShow: false,
				isShow: false,
                imgName: '',
                visible: false,
                isDelete: false,
                imgUrl: '',
                infoData:{
                	age: '',
                	gender: '',
                	real_name: '',
                	tel: ''
                },
                caseData: [
                	{
                		value: '内科',
	                    label: '内科',
	                    children: [
	                        {
	                        	value: '心血管内科',
	                            label: '心血管内科'
	                        },
	                        {
	                        	value: '消化内科',
	                            label: '消化内科'
	                        },
	                        {
	                        	value: '呼吸内科',
	                            label: '呼吸内科'
	                        },
	                        {
	                        	value: '神经内科',
	                            label: '神经内科'
	                        },
	                        {
	                        	value: '肿瘤内科',
	                            label: '肿瘤内科'
	                        }
	                    ]
                	},
                	{
                		value: '外科',
	                    label: '外科',
	                    children: [
	                        {
	                        	value: '心血管外科',
	                            label: '心血管外科'
	                        },
	                        {
	                        	value: '胸外科',
	                            label: '胸外科'
	                        },
	                        {
	                        	value: '沁尿外科',
	                            label: '沁尿外科'
	                        },
	                        {
	                        	value: '普外科',
	                            label: '普外科'
	                        },
	                        {
	                        	value: '胃肠外科',
	                            label: '胃肠外科'
	                        },
	                        {
	                        	value: '神经外科',
	                            label: '神经外科'
	                        }
	                    ]
                	},
                	{
                		value: '儿科',
                		label: '儿科',
                		children: [
                			{
                				value: '儿科',
                				label: '儿科'
                			}
                		]
                	},
                	{
                		value: '妇产科',
                		label: '妇产科',
                		children: [
                			{
                				value: '产科',
                				label: '产科'
                			},
                			{
                				value: '妇科',
                				label: '妇科'
                			}
                		]
                	},
                	{
                		value: '中医科',
                		label: '中医科',
                		children: [
                			{
                				value: '中医内科',
                				label: '中医内科'
                			},
                			{
                				value: '康复理疗',
                				label: '康复理疗'
                			}
                		]
                	}
                ],
                formData: {
                	id: '',
                	departmentcategory: '',
                	name: '',
                	hospitalname: '',
                	treatmentresult: '',
                	treatmentTime: '',
                	department: '',
                	imageurl: '',
                	customer_id: ''
                },
                imgData: {
                	defaultList: []
                },
                defaultList: [
                    { 'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar' },
//                  { 'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar' },
//                  { 'url': 'https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D500/sign=e02b14da7af082022992913f7bfafb8a/060828381f30e924f5f96cc845086e061c95f7ee.jpg' },
//                  { 'url': 'http://img5.imgtn.bdimg.com/it/u=1725978519,2199747188&fm=26&gp=0.jpg' },
//                  { 'url': 'http://img3.imgtn.bdimg.com/it/u=1027670951,122393584&fm=26&gp=0.jpg' },
//                  { 'url': 'http://img5.imgtn.bdimg.com/it/u=4110029939,3854282890&fm=26&gp=0.jpg' },
//                  { 'url': 'http://img0.imgtn.bdimg.com/it/u=4111083592,2039923392&fm=26&gp=0.jpg' },
                    
                ],
                imgData: {
                	image: ''
                },
                uploadList: [],
				tableColumns: [
					{ title: '门诊', key: 'departmentcategory', align: "center" },
					{ title: '姓名', key: 'name', align: "center" },
					{ title: '就诊医院', key: 'hospitalname', align: "center" },
					{ title: '就诊结果', key: 'treatmentresult', align: "center" },
					{ title: '就诊日期', key: 'treatmentTime', align: "center" },
					{ title: '就诊科室', key: 'department', align: "center" },
					{ title: '检查资料', key: 'imageurl', align: "center",
						 render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: 'primary', size: 'small' },
                                    style: { marginRight: '5px' },
                                    on: {
                                        click: () => {
                                        	this.isImgShow = true;
                                        	this.isDelete = true;
//                                      	this.defaultList = params.row.imgData;
											console.log(params.row)
											if(params.row.imageurl == 'null'){
												
												this.isHaveImg = false;
											} else {
												this.isHaveImg = true;
												this.formData.imageurl = params.row.imageurl;
											}
//											
                                        	
                                        }
                                    }
                                }, '查看图片')
                            ]);
                        }
					},
					{
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: 'primary', size: 'small' },
                                    style: { marginRight: '5px' },
                                    on: {
                                        click: () => {
                                        	this.isShow = true;
//                                      	console.log(params.row)
                                        	this.formData = JSON.parse(JSON.stringify(params.row))
                                        	let arr = [];
                                        	//  判断 那个科室  ，前面需要加一个大科
                                        	if(params.row.department === '神经内科' || params.row.department === '消化内科' || 
                                        	   params.row.department === '心血管内科' || params.row.department === '呼吸内科' || 
                                        	   params.row.department === '肿瘤内科') {
                                        		arr.push('内科')
                                        		arr.push(params.row.department);
                                        	} else if(params.row.department === '心血管外科' || params.row.department === '胸外科' || 
                                        			params.row.department === '沁尿外科' || params.row.department === '普外科' ||
                                        			params.row.department === '胃肠外科' || params.row.department === '神经外科') {
	                                        		arr.push('外科')
	                                        		arr.push(params.row.department);
                                        	} else if(params.row.department === '儿科') {
                                        			arr.push('儿科')
	                                        		arr.push(params.row.department);
                                        	} else if(params.row.department === '产科'|| params.row.department === '妇科') {
                                        			arr.push('妇产科')
	                                        		arr.push(params.row.department);
                                        	} else if(params.row.department === '中医内科'|| params.row.department === '康复理疗') {
                                        			arr.push('中医科')
	                                        		arr.push(params.row.department);
                                        	}
                                        	this.keshi = arr;
//                                      	this.formData.department = ['内科','心血管内科'];
                                        	console.log(params.row)
                                        	this.formData.id = params.row.id;
//                                      	this.keshi = params.row.keshi.split('/');
//                                      	console.log(this.keshi)
                                        }
                                    }
                                }, '编辑')
                            ]);
                        }
                    }
				],
				tableData: [],
				tableData1: [],
				totalPage: 1,
      			isPage: false,
      			pageNum: ''
			}
		},
		methods: {
			//  获取基本信息
			getBaseData(){
				this.$http.get('/customer_monitor/last_monitor/' + this.customer_id)
				.then(({data})=>{
					console.log(data)
					this.infoData.real_name = data.data.real_name;
					if(data.data.gender == 1) {
						this.infoData.gender = '男'
					} else {
						this.infoData.gender = '女'
					}
					this.infoData.age = data.data.age;
					this.infoData.tel = data.data.tel;
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			// 设置时间
			setTime(date){
				this.formData.treatmentTime = date;
			},
			// 就诊科室
			caseAction(val){
//				console.log(val[1])
				this.formData.department = val[1];
			},
			//  显示图片
            handleView (name) {
            	this.imgUrl = name;
                this.visible = true;
                this.isShow = false;
                this.isImgShow = false;
            },
            handleBeforeUpload(file){
            	console.log(file)
            },
            handleSuccess(){
            	
            },
            // 图片格式错误
		    uploadFormatError(file) {
		      this.$Notice.warning({
		        title: "图片格式",
		        desc: "图片" + file.name + "格式不对,请上传jpg/jpeg/png格式的图片"
		      });
		    },
		    // 图片容量过大
		    uploadMaxSize(file) {
		      this.$Notice.warning({
		        title: "图片大小",
		        desc: "图片  " + file.name + " 过大, 请上传大小不超过2M的图片."
		      });
		    },
		    // 图片上传失败
		    uploadError(err) {
		      this.$Notice.error({
		        title: "上传结果",
		        desc: "图片上传失败！"
		      });
		    },
//          handleRemove (file) {
//          	console.log(file)
//              this.$Modal.confirm({
//                  content: '您确定要删除图片吗？',
//                  onOk: () => {
//                  	this.formData.imageurl = '';
//                  	this.isDelete = false;
//		                this.$Message.info('删除图片成功!');
////		                this.baseData.imgUrl = '';
//                  }
//              });
//          },
            // 取消
            cancel(showName){
            	this[showName] = false;
            	this.isImgShow = true;
            },
            //保存
            keepCase(refName){
            	this.$http.post('/medical_history/update_medical_detail/' + this.customer_id, this.formData)
            	.then((res)=>{
            		// 请求这个接口是因为，假如你在 第二页修改某条数据，修改完会跳到第一页，效果不好。  实现修改完还是当前的页面
            		this.getData('/medical_history/detail_' + this.customer_id, {
						params: {
							page: this.pageNum,
							limit: 10
						}
					})
            		this.$refs[refName].resetFields();
            		this.isShow = false;
//          		console.log(res)
            		
            		
            	})
            	.catch((err)=>{
            		console.log(err);
            	})
            },
            //取消
            caseCancel(refName, showName){
            	this.$refs[refName].resetFields();
				this[showName] = false;
            },
          
           // 获取数据
            getData(url, jsonData){
            	this.$http.get(url, jsonData)
            	.then(({data})=>{
            		console.log(data)
            		this.tableData1 = data.data.list;
            		
            		//  分页
					this.totalPage = data.data.total;
					if(this.totalPage > 0) {
						this.isPage = true;
					} else {
						this.isPage = false;
					}
					
					if (this.isSearch) {
			        	this.isSearch = false;
			       }
            	})
            	.catch((err)=>{
            		console.log(err);
            		this.$Notice.error({ title: "病历详情获取失败！" });
            		if (this.isSearch) {
			        	this.isSearch = false;
			        }
            	})
            },
            // 分页
            selectPage(pageNum){
            	this.pageNum = pageNum;
            	console.log(this.pageNum);
				this.getData('/medical_history/detail_' + this.customer_id, {
					params: {
						page: pageNum,
						limit: 10
					}
				})
				
			}
        },
        //  页面初始化
        created(){
        	// 传值   
			this.customer_id = this.$route.params.id;
			this.formData.customer_id = this.$route.params.id;
			//  基本信息
			this.getBaseData()
        	this.getData('/medical_history/detail_' + this.customer_id, this.formData);
        }
	}
</script>

<style lang="less" scoped>
.imgbox{
	width: 100px;
	img{
		width: 100%;
		display: block;
	}
}
	
</style>

<style scoped>
	.head {
		margin: 10px;
		margin-bottom: 20px;
	}
	.head span{
		margin-right: 50px;
	}
	 .demo-upload-list{
        display: inline-block;
        /*width: 60px;*/
        height: auto;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
        z-index: 999999;
        margin-bottom: 20px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
         z-index: 999999;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
        z-index: 999999;
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
         z-index: 999999;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 40px 2px;
         z-index: 999999;
    }
	
	
</style>